<template>
  <div class="cell_container">
    <el-descriptions
      class="margin-top"
      style="zindex: 0"
      :title="`编号：${cell.no} `"
      :column="1"
      direction="horizontal"
    >
      <el-descriptions-item label="容量">{{ cell.storageLimit }}</el-descriptions-item>
      <el-descriptions-item label="锁ID">{{ cell.lockId }}</el-descriptions-item>
    </el-descriptions>

    <div class="cell_btn">
      <el-button
        type="success"
        size="small"
        @click="setCell(cell)"
        >{{ getBtnText }}</el-button
      >
    </div>
    <CellDialog
      ref="CellDialog"
      dialogFormDesignerName="柜格管理"
      @updateCell="updateCell"
    ></CellDialog>
  </div>
</template>
<script>
import CellDialog from './CellDialog.vue'

const STATUS = {
  CREATE: 0,
  UPDATE: 1,
  DETAIL: 2,
}
export default {
  props: {
    cell: {
      type: Object,
      default: () => {},
    },
    tableData: {
      type: Array,
      default: () => [],
    },
    dialogStatus: {
      type: Number,
      default: 0,
    },
  },
  components: {
    CellDialog,
  },
  computed: {
    getBtnText() {
      if (this.dialogStatus === STATUS.UPDATE || this.dialogStatus === STATUS.CREATE) {
        return '设置柜子'
      }
      return '查看柜子'
    },
  },
  data() {
    return {}
  },
  methods: {
    setCell(cell) {
      if (this.dialogStatus === STATUS.DETAIL) {
        this.$refs.CellDialog.showDialog(cell, 2, cell)
      } else {
        this.$refs.CellDialog.showDialog(cell, 1, cell)
      }
    },
    updateCell(cell) {
      this.$emit('updateCell', cell)
    },
  },
}
</script>
<style lang="scss" scoped>
// .cell_container {
//   width: 100%;
//   height: 100%;
//   background-image: url('board.png'); /* 设置背景图片 */
//   background-size: 100% 100%; /* 覆盖整个div，也可以用contain保持图片的比例 */
//   background-position: center; /* 图片居中显示 */
//   background-repeat: no-repeat; /* 防止图片重复 */
//   padding: 20px 20px;
// }
</style>
